<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>成远生产管控平台 - 注册</title>
    <link rel="stylesheet" href="../layui/css/layui.css" />
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        body {
            background-image: url('https://picsum.photos/id/1048/1920/1080');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }

        .register-container {
            background-color: rgba(255, 255, 255, 0.95);
            padding: 40px;
            border-radius: 15px;
            box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
            width: 450px;
            max-width: 95%;
        }

        .register-title {
            text-align: center;
            margin-bottom: 40px;
            font-size: 32px;
            color: #333;
            font-weight: 600;
            position: relative;
        }

        .register-title::after {
            content: '';
            position: absolute;
            bottom: -15px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background-color: #009688;
            border-radius: 4px;
        }

        .layui-form-label {
            width: 90px;
            color: #555;
            font-weight: 500;
            padding: 10px 0;
            font-size: 16px;
        }

        .layui-input-inline {
            width: calc(100% - 110px);
            position: relative;
        }

        .layui-input {
            border-radius: 5px;
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
            height: 42px;
            font-size: 16px;
        }

        .layui-input:focus {
            border-color: #009688 !important;
            box-shadow: 0 0 8px rgba(0, 150, 136, 0.3);
        }

        .layui-btn {
            background-color: #009688;
            border-radius: 5px;
            transition: all 0.3s ease;
            height: 44px;
            font-size: 18px;
            letter-spacing: 1px;
        }

        .layui-btn:hover {
            background-color: #00796b;
        }

        .password-strength {
            margin-top: 8px;
            font-size: 14px;
            height: 20px;
        }

        .password-strength span {
            display: inline-block;
            width: 33%;
            height: 6px;
            margin-right: 3px;
            border-radius: 3px;
            background-color: #eee;
        }

        .strength-text {
            display: inline-block;
            margin-left: 8px;
            vertical-align: middle;
        }

        .register-btn {
            display: block;
            text-align: center;
            margin-top: 25px;
            color: #333;
            transition: color 0.3s ease;
            font-size: 16px;
        }

        .register-btn:hover {
            color: #009688;
        }

        @media screen and (max-width: 768px) {
            .register-container {
                padding: 30px 20px;
                margin: 15px;
            }

            .register-title {
                font-size: 26px;
            }

            .layui-input-inline input {
                font-size: 16px;
                height: 40px;
            }

            .layui-form-label {
                width: 70px;
                padding: 10px 5px;
                text-align: left;
                font-size: 15px;
            }

            .layui-input-inline {
                width: calc(100% - 90px);
            }
        }
    </style>
</head>
<body>

<div class="register-container">
    <div class="title-container">
        <fieldset class="layui-elem-field layui-field-title">
            <legend>成远生产管控平台<br>用户注册</legend>
        </fieldset>
    </div>
    <div class="register-title">创建新账户</div>

    <form class="layui-form" lay-filter="registerForm">
        <div class="layui-form-item">
            <label class="layui-form-label">
                <i class="fa fa-user-plus" aria-hidden="true"></i>
            </label>
            <div class="layui-input-inline">
                <input type="text" name="username" id="registerUsername" autocomplete="off" placeholder="请输入用户名"
                       class="layui-input" lay-verify="username">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">
                <i class="fa fa-lock" aria-hidden="true"></i>
            </label>
            <div class="layui-input-inline">
                <input type="password" name="password" id="registerPassword" autocomplete="off" placeholder="请输入密码"
                       class="layui-input" lay-verify="password">
                <i class="fa fa-eye toggle-password" id="toggleRegisterPassword" aria-hidden="true"></i>
            </div>
            <div class="password-strength" id="passwordStrength">
                <span></span><span></span><span></span>
                <span class="strength-text"></span>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">
                <i class="fa fa-building" aria-hidden="true"></i>
            </label>
            <div class="layui-input-inline">
                <select name="unitId" id="unitId" lay-verify="unitId">
                    <option value="">请选择单位</option>
                    <!-- 单位选项将通过 AJAX 动态加载 -->
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="registerForm">
                    <i class="fa fa-check-circle" aria-hidden="true"></i> 注册
                </button>
            </div>
        </div>
    </form>

    <div class="layui-form-item">
        <a href="../login.html" class="register-btn">
            <i class="fa fa-arrow-circle-left" aria-hidden="true"></i> 返回登录
        </a>
    </div>
</div>

<script src="../layui/layui.js"></script>
<script src="https://cdn.jsdelivr.net/npm/crypto-js@4.1.1/crypto-js.min.js"></script>
<script>
    layui.use(['form', 'jquery', 'layer'], function () {
        var form = layui.form,
            $ = layui.jquery,
            layer = layui.layer;

        // 合并密码验证规则：同时满足两个页面的要求
        form.verify({
            username: function (value, item) {
                if (!value) {
                    return '用户名不能为空';
                }
                if (!/^[a-zA-Z0-9_]{3,20}$/.test(value)) {
                    return '用户名长度应在3到20个字符之间，只能包含字母、数字和下划线';
                }
            },
            password: function (value, item) {
                if (!value) {
                    return '密码不能为空';
                }
                // 同时满足两个页面的密码规则
                if (!/^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,20}$/.test(value)) {
                    return '密码长度应在8到20个字符之间，需包含字母、数字和特殊字符';
                }
            },
            unitId: function (value, item) {
                if (!value) {
                    return '请选择所属单位';
                }
            }
        });

        // 密码强度检测
        $('#registerPassword').on('input', function() {
            const password = $(this).val();
            const strengthMeter = $('#passwordStrength');
            const strengthBars = strengthMeter.find('span:not(.strength-text)');
            const strengthText = strengthMeter.find('.strength-text');

            let strength = 0;

            // 密码长度检查
            if (password.length >= 8) strength++;
            if (password.length >= 12) strength++;

            // 包含字母、数字和特殊字符
            if (/[A-Za-z]/.test(password)) strength++;
            if (/\d/.test(password)) strength++;
            if (/[@$!%*#?&]/.test(password)) strength++;

            // 重置所有条颜色
            strengthBars.css('background-color', '#eee');

            // 根据强度设置条颜色
            if (strength >= 1) strengthBars.eq(0).css('background-color', '#ff5252'); // 弱
            if (strength >= 3) strengthBars.eq(1).css('background-color', '#ffeb3b'); // 中
            if (strength >= 5) strengthBars.eq(2).css('background-color', '#4caf50'); // 强

            // 设置强度文本
            let text = '';
            if (strength <= 2) text = '弱';
            else if (strength <= 4) text = '中';
            else text = '强';

            strengthText.text(text).css('color', strength >= 5 ? '#4caf50' : strength >= 3 ? '#ffeb3b' : '#ff5252');
        });

        // 密码可见性切换
        $('#toggleRegisterPassword').on('click', function () {
            const $passwordInput = $('#registerPassword');
            const type = $passwordInput.attr('type') === 'password' ? 'text' : 'password';

            $passwordInput.attr('type', type);
            $(this).toggleClass('fa-eye fa-eye-slash');
        });

        // 加载单位列表
        $.ajax({
            type: 'GET',
            url: 'http://59.110.144.74/user/units',
            dataType: 'json',
            success: function (units) {
                var select = $('#unitId');
                units.forEach(function (unit) {
                    select.append('<option value="' + unit.id + '">' + unit.unitName + '</option>');
                });
                form.render('select'); // 重新渲染表单
            },
            error: function (xhr, status, error) {
                console.error(error);
                layer.msg('加载单位列表失败');
            }
        });

        form.on('submit(registerForm)', function (data) {
            var username = data.field.username;
            var password = data.field.password;
            var unitId = data.field.unitId;

            const loadingIndex = layer.load(1, {
                shade: [0.5, '#000']
            });

            // 发送 AJAX 请求进行注册
            $.ajax({
                type: 'POST',
                url: 'http://59.110.144.74/user/register',
                contentType: 'application/json',
                data: JSON.stringify({ username: username, password: password, unitId: unitId }),
                dataType: 'json',
                success: function (res) {
                    layer.close(loadingIndex);

                    if (res.success) {
                        layer.msg('注册成功，请使用新账户登录', { icon: 1 });
                        setTimeout(function() {
                            window.location.href = 'login.html';
                        }, 1500);
                    } else {
                        layer.msg(res.message || '注册失败，请重试', { icon: 2 });
                    }
                },
                error: function (xhr, status, error) {
                    layer.close(loadingIndex);
                    console.error(error);
                    layer.msg('注册失败，请检查网络或联系管理员', { icon: 2 });
                }
            });

            return false; // 阻止表单默认提交行为
        });
    });
</script>
</body>
</html>
